<template lang="pug">
a-col(:class="['mb-4', last ? 'search-bar-item-last' : '']" v-bind="propsCol")
  a-form-item.w-full(:wrapperCol="last ? attrs.wrapperCol || { span: 24 } : attrs.wrapperCol" v-bind="attrs")
    slot
</template>
<script lang="ts" setup>
// defineOptions({ name: 'SearchBarItem' })

const props = defineProps({
  /**
   * 是否是最后一个元素，固定在右下角
   */
  last: { type: Boolean, default: false },
  /**
   * col 属性 （同 [a-col](https://www.antdv.com/components/grid-cn#Col) 组件属性）
   */
  col: { type: Object, default: () => ({}) },
})
const attrs = useAttrs()
const { col } = toRefs(props)
const defaultCol = {
  xs: 24,
  md: 24,
  lg: 12,
  span: 8,
  xl: 8,
  xxl: 6,
  xxxl: 4,
}
const propsCol = reactive(Object.keys(col.value).length ? col.value : defaultCol)
</script>
<style lang="less">
.search-bar-item-last {
  justify-self: flex-end;
  float: right;
  text-align: right;
  flex: 1 !important;
  max-width: 100% !important;
  &:before {
    content: ' ';
    flex-grow: 1;
  }
}
</style>
